{extend name="base" /}
{block name="css"}
<style>
    #dictTable + .layui-table-view .layui-table-tool-temp {
        padding-right: 0;
    }

    #dictTable + .layui-table-view .layui-table-body tbody > tr td {
        cursor: pointer;
    }

    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click {
        background-color: #fff3e0;
    }

    #dictTable + .layui-table-view .layui-table-body tbody > tr.layui-table-click td:last-child > div:before {
        position: absolute;
        right: 6px;
        content: "\e602";
        font-size: 12px;
        font-style: normal;
        font-family: layui-icon !important;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

</style>
{/block}
{block name="body"}
<div class="layui-col-md3">
    <div class="layui-card" style="padding: 0px 10px 10px 10px;">
        <!-- 数据表格1 -->
        <table id="dictTable" lay-filter="dictTable"></table>
        <!-- 表格操作列 -->
        <script type="text/html" id="edit">
            <a href="{:url('admin/table/edit')}?id={{d.table_id}}" class=" layui-btn-sm ajax-iframe" data-width="440px" data-height="200px">改</a>
            <a href="{:url('admin/table/del')}?id={{d.table_id}}" class="layui-btn-sm ajax-delete">删</a>
        </script>
    </div>
</div>
<div class="layui-col-md9">
    <div class="layui-card" style="padding: 0px 10px 10px 10px;">
        <!-- 数据表格2 -->
        <table id="dictDataTable" lay-filter="dictDataTable"></table>
        <!-- 表格操作列 -->
        <script type="text/html" id="tableTBTrack">
            <a href="{:url('admin/table/edit_data')}?id={{d.id}}" class="layui-btn layui-btn-sm ajax-iframe" data-width="80%" data-height="100%">修改</a>
<!--            <a href="{:url('admin/table/del_data')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>-->
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="sort_order">
            <input type="text" name="sort_order" value="{{d.sort_order}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('admin/table/edit_data')}?id={{d.id}}">
        </script>
        <!-- 权限列 -->
        <script type="text/html" id="status">
            <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="启用|禁用" data-url="{:url('admin/table/edit_data')}?id={{d.id}}" {{d.status==1?'checked':''}}>
        </script>
    </div>
</div>
{/block}
{block name="js"}
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;
        var selObj;  // 左表选中数据
        var newid = layui.data('newid');
        var leftid = newid.id ? newid.id : 0;
        /* 渲染表格 */
        var insTb = table.render({
            elem: '#dictTable',
            url: "{:url('admin/table/get_table')}",
            height: 'full-70',
            // toolbar: ['<p>',
            //     '<a class="layui-btn layui-btn-sm icon-btn ajax-iframe" href="{:url('admin/table/add')}" data-width="440px" data-height="200px"><i class="layui-icon">&#xe654;</i>添加表</a>&nbsp;',
            //     '</p>'].join(''),
            defaultToolbar: [],
            cols: [[
                {type: 'numbers'},
                {field: 'table_name', title: '名称'},
                {templet: '#edit', title: '操作',width:100}
            ]],
            done: function (res, curr, count) {
                $('#dictTable+.layui-table-view .layui-table-body tbody>tr:eq('+ leftid +')').trigger('click');
            }
        }); 

        /* 监听行单击事件 */
        table.on('row(dictTable)', function (obj) {
            selObj = obj;
            layui.data('newid', {key: 'id',value:obj.data.leftid});
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
            insTb2.reload({where: {table_id: obj.data.table_id}, page: {curr: 1}, url: '{:url('admin/table/index_json')}'});
        });
        
        /* 渲染表格2 */
        var insTb2 = table.render({
            elem: '#dictDataTable',
            data: [],
            height: 'full-70',
            page: true,
            toolbar: ['<p>',
                // '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加字段</button>&nbsp;',
                '<button lay-event="update" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe669;</i>更新字段</button>&nbsp;',
                '</p>'].join(''),
            cellMinWidth: 100,
            text: {
                none: '暂无字段信息,请通过"更新字段"来刷新字段信息' //默认：无数据。
            },
            cols: [[
                {type: 'numbers',title:'#'},
                {field: 'comment', title: '注释', sort: true},
                {field: 'field', title: '名称', sort: true},
                {field: 'type', title: '类型', sort: true},
                {field: 'length', title: '长度', sort: true},
                {field: 'input', title: '输入框', sort: true},
                {templet: '#sort_order', title: '排序', sort: true, align: 'center', width: 80},
                {templet: '#status', title: '状态', sort: true, align: 'center', width: 100},
                {title: '操作', toolbar: '#tableTBTrack', align: 'center', width: 160, minWidth: 120}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            },
        });

        /* 表格2头工具栏点击事件 */
        table.on('toolbar(dictDataTable)', function (obj) {
            if (obj.event === 'add') { // 添加
                var title = $(this).html();
                var index = layer.open({
                    title: title,
                    type: 2,
                    anim: 0,
                    shadeClose:true,
                    area: ['80%', '460px'],
                    content: "{:url('admin/table/add_data')}?table_id=" + obj.config.where.table_id,
                })
                return false;
            }else if (obj.event === 'update') { // 添加
                var index = layer.msg('请求中，请稍候', {
                    icon: 16,
                    time: false,
                    shade: 0.3
                });
                $.ajax({
                    url: "{:url('admin/table/update_field')}?table_id=" + obj.config.where.table_id,
                    type: 'post',
                    dataType: 'json',
                    success: function (result) {
                        if (result.code === 1 && result.url != '') {
                            setTimeout(function () {
                                location.href = result.url;
                            }, 1000);
                        }
                        layer.close(index);
                        layer.msg(result.msg, {icon: 1});
                    },
                    error: function (xhr, state, errorThrown) {
                        layer.close(index);
                        layer.msg(state + '：' + errorThrown, {icon: 2});
                    }
                });
                return false;
            }
        });

    });
</script>
{/block}